<template>
	<view class="piaol_details">
		<view class="piaol_infos">
			<image class="piao_in_fl" :src="purineDetail.thumb" mode=""></image>
			<view class="piao_in_fr">
				<text>{{purineDetail.name}}</text>
				<text>{{purineDetail.desc}}</text>
			</view>
		</view>
		<view class="ingredients">
			<text class="in_tit">嘌呤含量</text>
			<view class="in_con">
				<text>{{purineDetail.purine}}</text>
				<text>毫克</text>
				<text>每100克 (可食部分)</text>
			</view>
			<view class="in_foo">
				<view class="in_foo_list">
					<text>相对较低</text>
					<text>相对一般</text>
					<text>相对较高</text>
				</view>
				<view class="in_foo_lists">
					<text class="in_foo_one"></text>
					<text class="in_foo_tow"></text>
					<text class="in_foo_tree"></text>
				</view>
				<text>嘌呤含量低于 <text style="color: #9acca8;">53%</text> 的水产</text>
			</view>
		</view>
		<view class="evaluate">
			<view class="evaluate_top">
				<u-icon class="evaluate_top_icon" name="checkmark-circle-fill" color="#94e862" size="40"></u-icon> 
				<text>食物评价</text>
			</view>
			<view class="evaluate_con">{{purineDetail.suitable || '无'}}</view>
		</view>
		<view class="nutrition">
			<view class="nutrition_top">
				<text>营养元素</text>
				<text>单位: 每100克</text>
			</view>
			<view class="nutrition_con"> 
				<view class="tion_con_top">
					<text>热量</text><br>
					<text>{{purineDetail.hot || 0}}千卡</text>
				</view>
				<view class="tion_con_c">
					
				</view>
				<view class="tion_con_foo">
					<view>
						<u-circle-progress type="#01cb9b"  :percent="purineDetail.protein" duration="2000" border-width="10">
							<view class="u-progress-content"> 
										<text>蛋白质</text>
										<text>{{purineDetail.protein || 0}}%</text>
									</view>
						</u-circle-progress>
						<!-- <text>18克</text> -->
					</view>
					<view>
						<u-circle-progress type="#01cb9b" :percent="purineDetail.axunge" duration="2000" border-width="10">
							<view class="u-progress-content">
										<text>脂肪</text>
										<text>{{purineDetail.axunge || 0}}%</text>
									</view>
						</u-circle-progress>
						<!-- <text>18克</text> -->
					</view>
					<view>
						<u-circle-progress type="#01cb9b" :percent="purineDetail.CO" duration="2000" border-width="10">
							<view class="u-progress-content">
										<text>碳水化合物</text>
										<text>{{purineDetail.CO || 0}}%</text>
									</view>
						</u-circle-progress>
						<!-- <text>18克</text> -->
					</view>
				</view>
			</view>
		</view>
		<view class="deta_footer" @click="detaFooter">
			<view><text>纠错</text></view> 
		</view>
		<!-- 模态框 -->
		<view class="piao_box" v-show="showPiaoModal" @click="showPiaoModal = false">
			<view class="piao_modal" @click.stop>
				<textarea class="textarea" v-model="feedback" placeholder="输入纠错内容" />
				<view style="display: flex; justify-content: space-between;">
					<text class="piao_btn" style="background-color: #fa8575;" @click="showPiaoModal = false">取消</text>
					<text class="piao_btn" @click="getFeedBack">提交</text>
				</view>
				 
			</view>
			<!-- <u-icon class="piao_icon" name="close-circle" color="#ff4544" size="80"></u-icon> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				showPiaoModal: false,
				purineDetail: {},
				feedback:''
			};
		},
		onLoad(option) { 
			this.id = option.id
			this.getPurineDetail(this.id)
		},
		methods:{
			getPurineDetail(id){
				this.$api.sendRequest({
					url: '/api/purine/detail',
					data:{id},
					success: res => {
						if(res.code >= 0){ 
							this.purineDetail = res.data
							console.log(this.purineDetail)
						}
					}
				})
			},
			//转发
			onShareAppMessage(res) { 
				return {
					path: '/page/querypiaol/piaoldetails/index?id=' + this.id ,
					title: this.purineDetail.name,
				}
			},  
			onShareTimeline(){ 
				return {
					path: '/page/querypiaol/piaoldetails/index?id=' + this.id,
					title: this.purineDetail.name,
				}
			},
			// 纠错
			detaFooter(){
				this.showPiaoModal = true
			},
			getFeedBack(){
				let that = this  
				this.$api.sendRequest({
					url: '/api/purine/feedback',
					data:{
						id:that.id,
						content: that.feedback
					},
					success: res => { 
						if(res.code >= 0){
							uni.showToast({
								title: '提交成功',
								icon: 'none'
							})
							this.feedback = ''
							this.showPiaoModal = false 
						}else{ 
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.piaol_details{
		.piaol_infos{
			padding: 0 20rpx;
			display: flex;  
			min-height: 120rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #eee;
			.piao_in_fl{
				margin: auto 0;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			.piao_in_fr{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 540rpx;
				margin-left: 20rpx;
				& text:nth-child(1){
					font-size: 36rpx;
				}
				& text:nth-child(2){
					position: relative; 
					left: 30rpx;
					font-size: 28rpx; 
					color: #999;
					&::before{
						position: absolute;  
						left: -30rpx;
						top: 50%;
						transform: translateY(-50%);
						content: '';
						width: 20rpx;
						height: 20rpx;
						background-color: #f5d105;
						border-radius: 50%;
					}
				}
			}
		}	
		 .ingredients{
			 padding: 30rpx 0;
			 color: #999;
			 text-align: center;
			 background-color: #fff;
			 .in_con{
				 margin: 20rpx 100rpx; 
				 color: #fff;
				 background-color: #fa8575;
				 border-radius: 10rpx;
				 & text:nth-child(1){
					 font-size: 66rpx;
					 display: block;
				 }
				 & text:nth-child(2){  
				 	 display: block;
				 }
			 }
			 .in_foo{
				 padding: 0 30rpx;
				 color: #c1c1c1;
				 .in_foo_list,
				 .in_foo_lists{
					padding: 0 60rpx;
					display: flex;
					justify-content: space-around;
					text{
						flex: 1;
						font-size: 22rpx;
						color: #c1c1c1;
					}
				 }
				 .in_foo_lists{ 
					 margin: 20rpx 0;  
					 text {
						 height: 8rpx;
						 border-radius: 4rpx; 
					 }
					 .in_foo_one{
						 margin-right: 4rpx;
						  background-image: linear-gradient( to right, #69ca75, #b7c160);
					 }
					 .in_foo_tow{
						 margin-right: 4rpx;
						 background-image: linear-gradient( to right, #b7c061, #ef8c31);
						 &::before{
							 position: relative;
							 display: inline-block;
							 top: -12rpx;
							 left: -30rpx;
							 width: 12rpx;
							 height: 12rpx;
							 background-color: #fff;
							 content:'';
							 border-radius: 50%;
							 border: 5rpx solid #67c87b;
						 }
					 }
					 .in_foo_tree{
						 background-image: linear-gradient(to right, #e18541, #c53936);
					 }
				 }
			 }
		 }
		.evaluate{
			display: flex;
			flex-direction: column;
			min-height: 200rpx;
			background-color: #fff;
			view{
				padding: 0 20rpx;
				flex: 1;
				color: #c2c2c2;
				line-height: 100rpx; 
			}
			.evaluate_top{
				border-bottom: 2rpx solid #eee;
				.evaluate_top_icon{
					margin-right: 20rpx;
				}
			}
			.evaluate_con{
				line-height: 40rpx;
			}
		}
		.nutrition{
			margin-top: 20rpx;
			background-color: #fff;
			.nutrition_top{
				padding: 0 20rpx;
				display: flex;
				justify-content: space-between;
				height: 100rpx;
				line-height: 100rpx;
				text{
					color: #b5b0b2;
				}
			}
			.nutrition_con{
				height: 400rpx;
				.tion_con_top{ 
					height: 100rpx;
					text-align: center;
					line-height: 32rpx;
					color: #bcbcbc;
				}
				.tion_con_c{
					margin: 0 auto;
					width: 400rpx;
					height: 30rpx;
					border: 2rpx solid #999;
					border-bottom: none;
					&::before{
						content: '';
						position: relative;
						top: -24rpx;
						left: 50%;
						display: inline-block;
						width: 3rpx;
						height: 40rpx;
						background-color: #999;
					}
				}
				.tion_con_foo{
					display: flex;
					margin: 0 60rpx;
					height: 300rpx; 
					view {
						flex: 1;
						text-align: center; 
						.u-progress-content{
							& text:nth-child(1){
								display: block;
								color: #656262;
							}
							& text:nth-child(2){
								font-size: 32rpx;
								color: #333;
								font-weight: 700;
							}
						}
					}
				}
			}
		}
		.deta_footer{
			position: fixed;
			width: 100%;
			bottom: 0;
			display: flex;
			text-align: center;
			height: 100rpx; 
			font-size: 32rpx;
			background-color: #fff;
			border: 1rpx solid #f8f8f8;
			view {
				flex: 1;
				font-size: 34rpx;
				line-height: 100rpx;
			}
		}
		
		.piao_box{
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			// background-color: rgba(0,0,0,.4);
			.piao_modal{
				padding: 20rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 600rpx;
				// height: 450rpx;
				border-radius: 20rpx;
				background-color: #fff;
				border: 2rpx solid #eaeaea;
				.textarea{
					margin-bottom: 30rpx;
					width: 100%;
					height: 300rpx;
					font-size: 32rpx;
				}
				.piao_btn{
					display: block; 
					margin: 0 10rpx;
					height: 80rpx;
					width: 50%;
					line-height: 80rpx;
					text-align: center;
					color: #fff;
					border-radius: 20rpx;
					background-color: #0f7240;
				}
			}
			.piao_icon{
				position: absolute;
				left: 50%;
				top: 72%;
				transform: translate(-50%,-50%);
			}
		}
	}
</style>
